<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        [v-cloak] {
            display: none;
        }

        .title {
            border: 2px solid gold;
        }

        .p1 {
            text-decoration: underline;
        }

        .p11 {
            background-color: pink;
        }
    </style>
</head>
<body>
<script>

    function fn() {
        /*this 代表是谁？ window*/
        console.log('fn');
    }

    /*window.fn();*/
    /*bind call apply*/

    window.onload = function () {
        /*let obj = {}
        obj.say = function(){
            console.log(this);
        }
        */
        document.getElementById('btn').onclick = function () {
            console.log(this);
        }
    }

</script>
<button onclick="fn()" id="btn">原生点击我</button>
<div id="app">
    <h2>在做项目很多时候，有表单注册，用户留言，评论功能，需要收集用户的信息</h2>
    <h3>登录表单</h3>
    <form action="">
        <div>
            手机号码：<input type="text" v-model.trim="loginForm.phoneNumber">
            <!--如果不加，vuejs自动传递-->
            <!--<button @click.prevent="getCodeClickHandler">点击获取验证码</button>-->
            <!--如果事件的回调函数加上了括号 1. 需要手工的传递 $event 事件源对象 -->
            <!--<button @click.prevent="getCodeClickHandler($event, 1, 2, 3)">点击获取验证码</button>-->
            <button @click.prevent="getCodeClickHandler">点击获取验证码</button>
        </div>
        <div>
            验证码：<input type="text" v-model.number="loginForm.code">
        </div>
        <div>
            <button @click.prevent="submitHandler">登录</button>
        </div>
    </form>
</div>
</body>
<script src="lib/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            /*数据整体性*/
            loginForm: {
                phoneNumber: '',
                code: '',
            },
            /*其他的数据*/
        },
        methods: {
            /*见名知意*/
            /* getCodeClickHandler(event, ...ret) {
                 console.log('clickHandler', this.loginForm.phoneNumber, event, ret);
             },*/

            getCodeClickHandler: () => {
                // vuejs 里面事件回调函数里面的 this 代表的当前实例对象。如果是原生的 onclick = function(){} 的写法，this是谁？
                // console.log('getCodeClickHandler', this); // this 帮我们做了修正，修正为了当前实例对象
                // 如果vuejs里面的事件回调函数改为 箭头函数写法，this代表谁？
                // console.log(this.loginForm.phoneNumber); // ?  Cannot read properties of undefined (reading 'phoneNumber')"
                // this.loginForm undefined.phoneNumber
                // window.loginForm ?
                console.log('getCodeClickHandler');

            },
            /* submitHandler(event) {
                 event.preventDefault(); // 阻止默认事件
                 // event.stopPropagation(); // 阻止冒泡
                 console.log('submitHandler', this.loginForm, event);
             }*/
            submitHandler() {
                console.log('submitHandler', this.loginForm);
            }
        }
    })
</script>

</html>
